<html>
<head>
<title>Drag &amp; Drop</title>
<script language="JavaScript" type="text/javascript" src="./lib/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="./lib/scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript">

var width = 589;
var height = 442;
var bubbles = [new bubble('s0_1'),
	       new bubble('s0_2'),
	       new bubble('s0_3'),
	       new bubble('s1_1'),
	       new bubble('s1_2'),
	       new bubble('s1_3'),
	       new bubble('s2_1'),
	       new bubble('s2_2'),
	       new bubble('s2_3')];

window.onload = function(){
  // Draggable canvas.
  new Draggable('bg');
  
  // Hide all <img>s of bubbles.
  var bubble = $A(document.getElementsByName('bubble'));
  bubble.forEach(function(x){
    Element.hide(x)});
  
  // Draggable all bugs.
  var bugs = $A(document.getElementsByName('bugs'));
  bugs.forEach(function(x){
    new Draggable(x, {endeffect: function(element) {new Effect.Pulsate(element, {pulses:2});}})});
  
  // Animate bubbles.
  setInterval(function(){
    $('bg').getContext('2d').clearRect(0,0,width,height);
    bubbles.forEach(function(x){
      x.draw()});
  },50);
}

// Returns a random integer between min and max
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max)
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function radian(angle) {
  return angle * (355 / 133) / 180;
}

function bubble(src){
  this.x = getRandomInt(0,width);
  this.y = getRandomInt(0,height);
  this.dy = getRandomInt(1,3);
  this.a = getRandomInt(10,150);
  this.t = getRandomInt(0,359);
  this.draw = function () {
    var ctx = $('bg').getContext('2d');
    ctx.drawImage($(src), this.x + this.a * Math.sin(radian(this.t)),this.y);
    this.y-=this.dy;
    this.t+=1;
    if (this.y < -150) {
      this.x = getRandomInt(0,width);
      this.y = height;
    }
  };
}
</script>
</head>
<body bgcolor="#FFBFEF">
  <img src="./img/038.png">
  <canvas id="bg" width="589" height="440" style="position : absolute; left : 7px; border: 1px solid black;" ></canvas>
  <div style="width : 589px;">
  You can drag & drop these icons.
  <br>
  <img name="bugs" src="./img/bugs-1.png">
  <img name="bugs" src="./img/bugs-2.png">
  <img name="bugs" src="./img/bugs-3.png">
  <img name="bugs" src="./img/bugs-4.png">
  <img name="bugs" src="./img/bugs-5.png">
  <img name="bugs" src="./img/bugs-6.png">
  <img name="bugs" src="./img/bugs-7.png">
  <img name="bugs" src="./img/bugs-8.png">
  <img name="bugs" src="./img/bugs-9.png">
  <img name="bugs" src="./img/bugs-10.png">
  <img name="bugs" src="./img/bugs-11.png">
  <img name="bugs" src="./img/bugs-12.png">
  <img name="bugs" src="./img/bugs-13.png">
  <img name="bugs" src="./img/bugs-14.png">
  <img name="bugs" src="./img/bugs-15.png">
  <img name="bugs" src="./img/bugs-16.png">
  <img name="bugs" src="./img/bugs-17.png">
  <img name="bugs" src="./img/bugs-18.png">
  <img name="bugs" src="./img/bugs-19.png">
  <img name="bugs" src="./img/bugs-20.png">
  <img name="bugs" src="./img/bugs-21.png">
  <img name="bugs" src="./img/bugs-22.png">
  <img name="bugs" src="./img/bugs-23.png">
  <img name="bugs" src="./img/bugs-24.png">
  <img name="bugs" src="./img/bugs-25.png">
  <img name="bugs" src="./img/bugs-26.png">
  <img name="bugs" src="./img/bugs-27.png">
  <br>
  Thanks to "Flop Design".
  <a href="http://www.flopdesign.com/"><img src="http://www.flopdesign.com/link/flopbaner5.gif" alt="Flop Design" border="0" /></a> 
  </div>
  <img id="s0_1" name="bubble" src="./img/s0_1.png">
  <img id="s0_2" name="bubble" src="./img/s0_2.png">
  <img id="s0_3" name="bubble" src="./img/s0_3.png">
  <img id="s1_1" name="bubble" src="./img/s1_1.png">
  <img id="s1_2" name="bubble" src="./img/s1_2.png">
  <img id="s1_3" name="bubble" src="./img/s1_3.png">
  <img id="s2_1" name="bubble" src="./img/s2_1.png">
  <img id="s2_2" name="bubble" src="./img/s2_2.png">
  <img id="s2_3" name="bubble" src="./img/s2_3.png">
</body>
</html>
